<%--
  Created by IntelliJ IDEA.
  User: TaoSheng
  Date: 2022/10/11
  Time: 18:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="index-header">
    <div class="header-nav">
        <div class="index-logo">
            <img src="${pageContext.request.contextPath}/images/index.svg"/>
            <a href="index.jsp" >首页</a>
        </div>
        <span class="layui-breadcrumb" lay-separator="|">
                        <a href="personal/login.jsp" class="denglu">登录</a>
                        <a href="personal/regist.jsp" class="regist">免费注册</a>
                        <a href="personal/person.jsp">个人中心</a>
                        <a class="wodedingdan" href="">我的订单</a>
                    </span>
    </div>
    <div class="header-content">
        <!-- logo -->
        <div class="logo-img">
            <img src="${pageContext.request.contextPath}/images/logo.jpg"/>
            <span>秒杀商品</span>
        </div>
        <!-- 搜索 -->
        <div class="searchDept">
            <form action="http://localhost:8081/demo/getByName" method="get">
                <input type="hidden" name="pageNum" value="1">
                <input class="search" name="search" type="text" placeholder="请输入您需要搜索的商品" value="">
<%--                <input type="submit" class="searchBtn" value="搜索">--%>
                <button href="" class="searchBtn">搜索</button>
                <%--            product_show/more_products.jsp--%>
            </form>
        </div>
        <a href="personal/myShopcar.jsp" class="myCart">
            <img src="${pageContext.request.contextPath}/images/shopcar.svg" />
            <span>购物车</span>
            <span class="cart-count" style="color: red " >(0)</span>
        </a>
    </div>
    <!-- 页面导航栏 -->
    <div class="page-nav">
        <a href="index.jsp" class="seckill">秒杀商品</a>
        <a href="product_show/more_products.jsp" class="BarPrice">更多好物</a>
        <a href="javascript:youwu()">抢购优惠券</a>
    </div>
</div>
<!-- 首页身体部分 -->
<div class="mianPart">
    <!-- 横幅 -->
    <a href="" class="banner">
        <img class="BG" src="${pageContext.request.contextPath}/images/banner1.png">
    </a>
    <!-- 秒杀提示 -->
    <div class="seckill-tip">
        <ul class="allTip">
            <li class="tip">
                <!--使用ajax来实现异步请求，不更改页面，参考增删改查-->
                <a class="timeline" href="javascript:changePro1()">
                    <span class="startTime">10:00</span>
                    <div class="willStart"></div>
                    <div class="timeCount">
                        <!-- <span id="_d">00</span>   -->
                        <span class="timetip"></span>
                        <span class="_h"></span>
                        <span class="_m"></span>
                        <span class="_s"></span>
                    </div>
                </a>
            </li>
            <li class="tip">
                <a class="timeline" href="javascript:changePro2()">
                    <span class="startTime">12:00</span>
                    <div class="willStart"></div>
                    <div class="timeCount">
                        <!-- <span id="_d">00</span>   -->
                        <span class="timetip"></span>
                        <span class="_h"></span>
                        <span class="_m"></span>
                        <span class="_s"></span>
                    </div>
                </a>
            </li>
            <li class="tip">
                <a class="timeline" href="javascript:changePro3()">
                    <span class="startTime">14:00</span>
                    <div class="willStart"></div>
                    <div class="timeCount">
                        <!-- <span id="_d">00</span>   -->
                        <span class="timetip"></span>
                        <span class="_h"></span>
                        <span class="_m"></span>
                        <span class="_s"></span>
                    </div>
                </a>
            </li>
            <li class="tip">
                <a class="timeline" href="javascript:changePro4()">
                    <span class="startTime">16:00</span>
                    <div class="willStart"></div>
                    <div class="timeCount">
                        <!-- <span id="_d">00</span>   -->
                        <span class="timetip"></span>
                        <span class="_h"></span>
                        <span class="_m"></span>
                        <span class="_s"></span>
                    </div>
                </a>
            </li>
            <li class="tip">
                <a class="timeline" href="javascript:changePro5()">
                    <span class="startTime">18:00</span>
                    <div class="willStart"></div>
                    <div class="timeCount">
                        <!-- <span id="_d">00</span>   -->
                        <span class="timetip"></span>
                        <span class="_h"></span>
                        <span class="_m"></span>
                        <span class="_s"></span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!-- 商品界面 -->
    <div class="pro-show">
        <!-- 第一排 -->
        <ul class="product-list">
            <!-- 第一个商品 -->
            <li class="product">
                <a class="pro-img" href="product_show/detail.html">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="product_show/detail.html">立即抢购</a>
                </div>
            </li>
            <!-- 第二个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第三个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第四个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第五个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
        </ul>
        <!-- 第二排 -->
        <ul class="product-list">
            <!-- 第一个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第二个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第三个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第四个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第五个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
        </ul>
        <!-- 第三排 -->
        <ul class="product-list">
            <!-- 第一个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第二个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第三个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第四个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
            <!-- 第五个商品 -->
            <li class="product">
                <a class="pro-img" href="">
                    <img class="phone" src="${pageContext.request.contextPath}/images/index_phone1.jpg">
                    <i>HUAWEI nova 9亮黑色手机</i>
                    <div class="intro">
                        <img class="shopType" src="${pageContext.request.contextPath}/images/ziyin.png">
                        <span>搭载HarmonyOS</span>
                    </div>
                </a>
                <div class="price-part">
                    <div class="price">
                        <span>￥</span>
                        <span>2458</span>
                    </div>
                    <div class="saled">
                        <span>已售</span>
                        <span>17%</span>
                        <div class="progress">
                            <span class="haveSaled"></span>
                        </div>
                    </div>
                    <a class="buyBtn" href="">立即抢购</a>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 页面底部 -->
<div class="footer">
    <img src="images/bottom.png"/>
</div>
<script type="text/javascript">

    //  用户登录之后请求头部携带 token
    var token = localStorage.getItem("token")
    $(".wodedingdan").attr("href","/demo/getAllOrders?token=" + token);

    $(function() {
        var ws;
        if ("WebSocket" in window) {
            ws = new WebSocket("ws://localhost:8081/demo/webSocket/" + 2);
        }
        //与服务端建立连接时触发
        ws.onopen = function(){
            //  $("#content").append("<p>与服务端建立连接建立成功！您的客户端ID="+2+"</p>");
           // console.log("与服务器建立了连接")
            //模拟发送数据到服务器
            //ws.send("你好服务端！我是客户端 "+2);
        }
        //接收到服务端消息时触发
        ws.onmessage = function (evt) {
            let received_msg = evt.data;
            var result = confirm(received_msg);
            if(result){
                //console.log("选择确定")
                window.location.href="/demo/getAllOrders?token=" + token;
            }
        };
    })

    $.ajax({
        Type:"GET",
        url:"${pageContext.request.contextPath}/users/test1",
        headers: {'token': token},
        success:function (map){
            console.log(localStorage.getItem("token"))
            $(".denglu").text(map.custName)
            $(".cart-count").text("("+map.userCartProductCount+")")
            var ws1
            var custName=map.custName
            console.log(custName)
            //创建 WebSocket 对象,注意请求路径！！！！
            ws1 = new WebSocket("ws://localhost:8081/demo/webSocketCoupon/"+map.custName);
            //与服务端建立连接时触发
            ws1.onopen = function(){
                ws1.send(map.custName)
                console.log("与服务端建立连接建立成功！你好："+map.custName)
            }
            //接收到服务端消息时触发
            ws1.onmessage = function (evt) {
                let received_msg = evt.data;
                console.log("老子是啥："+received_msg)
                // alert("接收到服务端消息:"+received_msg)
                var result = confirm(received_msg)
                if(result){
                    window.location.href="${pageContext.request.contextPath}/personal/myCoupon.jsp"
                }else {
                    window.location.href="${pageContext.request.contextPath}/coupon/allCoupon.jsp"
                }
            };
            //服务端关闭连接时触发
            ws1.onclose = function() {
                console.error("连接已经关闭.....")
            };
        }
    })
    function  youwu(){
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/CouponWebsocket",
            headers: {'token': token},
            success:function (data){
                console.log(data)
                window.location.href="${pageContext.request.contextPath}/coupon/allCoupon.jsp"
            }
        })
    }

</script>

<script src="${pageContext.request.contextPath}/js/index.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</body>
</html>
